<!DOCTYPE html>

<html>
<head>
<title>Layout Manager</title>
<style>
div {
margin: 0;
padding: 0;
}
</style>

<sccript type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></sccript>
<script src="base2/base2.js"></script>
<script src="../layout.js"></script>
<script src="sizzle/sizzle.js"></script>

<script>

// main script
new function () {
	eval(base2.namespace);
	eval(base2.lang.namespace);
	eval(base2.Layout.namespace);

	// loader
	window.onload = function () {
//	document.addEventListener('DOMContentLoaded', function () {
		var layout = new FullLayoutManager(document);
		forEach(Sizzle('.grid', document), function (element) {
			layout.setFlexibleProperty(element, 'height');
			layout.setFlexibleProperty(element, 'width');
			layout.setOrientation(element, 'horizontal');
		});
		forEach(Sizzle('.column', document), function (element) {
			layout.setFlexibleProperty(element, 'height');
			layout.setFlexibleProperty(element, 'width');
		});
		layout.calculate();
//	}, false);
	}
};

</script>
</head>

<body id="container">
<div class="grid">
<div class="column" style="background: red">This is a column. This is a column. This is a column.</div>
<div class="column" style="background: blue">This is a column. This is a column. This is a column.</div>
<div class="column" style="background: green">This is a column. This is a column. This is a column.</div>
</div>
</body>
</html>